<template>
  <div>
  <el-container style="height: 1000px">
    <el-aside  class="m-aside">
      <el-scrollbar>
        <!--        logo和系统名称-->
        <div class="m-sysName" >
          <img src="../assets/vue.svg" alt="" width="10%">
          <span class="m-nameText">跟着春姐做毕设</span>
        </div>

        <!--        侧边菜单栏-->
<!--        <el-menu>-->
        <el-menu class="el-menu" :default-active="route.path" router>
<!--          <el-menu class="el-menu" :default-active="$route.path" router >-->

          <el-sub-menu index="1">
            <template #title>
              <el-icon><message /></el-icon>系统首页
            </template>
            <el-menu-item-group>
              <el-menu-item index="/manager/home">home</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>


          <el-sub-menu index="2" v-if="user.role === 1">
            <template #title>
              <el-icon><message /></el-icon>用户管理
            </template>
            <el-menu-item-group>
              <el-menu-item index="/manager/admin">管理员管理</el-menu-item>
              <el-menu-item index="/manager/user">用户管理</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>

          <el-sub-menu index="3">
            <template #title>
              <el-icon><message /></el-icon>信息管理
            </template>
            <el-menu-item-group>
              <el-menu-item index="/manager/grade">班级管理</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>

          <el-sub-menu index="4">
            <template #title>
              <el-icon><setting /></el-icon>系统设置
            </template>
            <el-menu-item-group>
              <el-menu-item index="/manager/about">Option 11</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>


        </el-menu>
      </el-scrollbar>
    </el-aside>

    <!--      右侧-->
    <el-container class="right-container">
      <!--        顶部菜单栏-->
      <el-header class="top-header">
<!--        <img src="../assets/avtar.png" alt="" style="width: 40px;border-radius: 50%;margin-right: 10px;">-->
        <img :src="user.avatar" alt="" style="width: 40px;height:40px;border-radius: 50%;margin-right: 10px;">
<!--        <span style="color: #4c5a73;font-weight: bold;font-size: 14px;margin-right: 20px">欢迎您，{{ user.userName }}</span>-->
        <span style="color: #4c5a73;font-weight: bold;font-size: 14px;margin-right: 20px">欢迎您，{{ user.userName }}</span>
          <el-dropdown>
            <el-icon><Setting /></el-icon>
            <template #dropdown>
              <el-dropdown-item>个人中心</el-dropdown-item>
              <div @click="logout()"><el-dropdown-item  >退出登录</el-dropdown-item></div>
            </template>
          </el-dropdown>
      </el-header>

      <!--表单-->
      <el-main>
        <el-scrollbar>
          <div>
            <router-view />
          </div>
        </el-scrollbar>
      </el-main>

    </el-container>
  </el-container>
  </div>
</template>

<!--<script setup> 和 <script lang="ts" setup> 主要的区别在于是否使用 TypeScript-->
<!--<script lang="ts" setup>-->
<script setup>
import { useRoute } from 'vue-router'
import { Menu as IconMenu, Message, Setting } from '@element-plus/icons-vue'
import router from "@/router/index.js";
// import request from "@/utils/request";
import {reactive} from "vue";
// import request from '@/utils/request';

const route = useRoute() // 获取当前路由

const user = reactive(JSON.parse(localStorage.getItem('user') || '{}'));

// 退出登录方法
const logout = () => {
  localStorage.removeItem('user');
  router.push('/login');
};

</script>